@keyframes bounceInRight {
    0% {
        transform: translate3d(100%, 0, 0);
    }
    50% {
        transform: translate3d(-20px, 0, 0);
    }
    75% {
        transform: translate3d(10px, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceOutRight {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(-20px, 0, 0);
    }
    100% {
        transform: translate3d(100%, 0, 0);
    }
}

#message-container {
    position: fixed;
    bottom: 0;
    right: 0;
    min-width: 20em;
    z-index: 99999;
    color: #fff;
    padding: 0.5em;
    max-width: 400px;
    transform: translate3d(100%, 0, 0);
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-duration: 0.7s;

    @include media-breakpoint-down(xs)  {
        max-width: 300px;
    }

    &.clear {
        animation-name: bounceOutRight;
    }

    &.visible {
        animation-name: bounceInRight;
    }

    .message {
        margin-top: 0.5em;
        padding: 1em;
        box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
        border-radius: 3px;
        background-color: $info;
        line-height: 2rem;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .content {
            text-align: left;
            flex: 1;
            max-width: 280px;
            line-height: 1.5;
            margin: 0 5px;
        }

        .dimiss-icon {
            cursor: pointer;
            &:before {
                display: inline-block;
                font-family: FontAwesome;
                margin-right: 8px;
                font-size: 1.2rem;
                vertical-align: bottom;
                content: $fa-var-times; //Font Awesome "times" variable
            }
        }

        .status:before {
            display: inline-block;
            font-family: FontAwesome;
            margin-right: 8px;
            font-size: 1.6rem;
            vertical-align: bottom;
        }
        &.success {
            background-color: $success;

            .status:before {
                content: $fa-var-check; //Font Awesome "check" variable
            }
        }

        &.warning {
            background-color: $warning;

            .status:before {
                content: $fa-var-warning; //Font Awesome "warning" variable
            }
        }

        &.error {
            background-color: $danger;

            .status:before {
                content: $fa-var-exclamation-circle; //Font Awesome "exclamation-circle" variable
            }
        }

        &.dimissed {
            display: none;
        }
    }
}
